/*
@author: stanfor
@date: 2022/8/19 09:54
@Version: 1.0
@last modify time : 2022/8/19 09:54
*/

import React, { CSSProperties, FC, ReactElement, ReactNode } from 'react';
import { Form, FormProps, FormInstance, ButtonProps } from 'antd';
import FooterEventBtn from '@C/base/SForm/footerBtnComponent';
import { SField } from '@C/base/SFields';
import './index.less';

// 默认导出表单子组件
export const SFields = SField;
export const NForm = Form;

type SFormProps = {
  name: string;
  layout: 'inline' | 'horizontal' | 'vertical';
  footerBtnType: 'confirm' | 'submit' | 'search' | 'import' | 'export';
  autoComplete: boolean;
  hideEventBtn: boolean;
  openCancelCallBackClear: boolean;
  openSubmitCallBackClear: boolean;
  // eslint-disable-next-line no-unused-vars
  onSubmit: (formValues?: object, getFormInstance?: () => FormInstance) => void;
  // eslint-disable-next-line no-unused-vars
  onCancel: (getFormInstance?: () => FormInstance) => void;
  children: ReactNode; // 可支持多个子集节点
  eventBtnConfig: {
    submit: ButtonProps;
    submitBtnText: string;
    hideSubmitBtn: boolean;
    cancel: ButtonProps;
    cancelBtnText: string;
    hideCancelBtn: boolean;
    textAlign: 'left' | 'right' | 'center';
    // CSSProperties 替换 CSSStyleDeclaration
    style: CSSProperties;
    extraBtn: ReactElement; // 只支持子集单个节点
  };
};

type filterProps = 'autoComplete' | 'tags';

/** SForm 组件说明
* @author: JasonStandFor
* @description Desc:: 'props' 参数说明: 只有 autoComplete、hideEventBtn、onSubmit、onCancel、
    openSubmitCallBackClear、openCancelCallBackClear、eventBtnConfig 等是包装属性，其它参数均取自 antd.FormInterface
* @name {String} 表单的唯一 key, 多个表单时用 name 区分, name 也是表单的 Id
* @layout {String} 表单布局, 可选择 horizontal | vertical | inline
* @autoComplete {Boolean} 自动填充, 来自于 Form 标签属性
* @form {FormInstance} 传入的 Form 实例
* @hideEventBtn {Boolean} 隐藏('提交'|'重置'|'返回')等按钮
* @footerBtnType {String} 底部按钮类型(可选 confirm|submit|search|import|export)
* @onSubmit {Function} 提交按钮事件, 默认返回 formValues 和 Form.useForm 实例
* @openSubmitCallBackClear {Boolean} 开启提交事件点击后自动清除表单，默认开启
* @onCancel {Function} 返回按钮事件, 默认返回 Form.useForm 实例
* @openCancelCallBackClear {Boolean} 开启返回事件点击后自动清除表单，默认关闭
* @eventBtnConfig {FooterEventBtn} 底部按钮详细配置, 详见 FooterEventBtn 组件
* @param { antd.FormInterface } props
* @return SForm
* @example:
example 1: 单表单
const [useForm] = Form.useForm();
<SForm
  name="formData"
  footerBtnType="search"
  form={useForm}
  openCancelCallBackClear
  autoComplete
  onSubmit={(formValues, getUseForm) => {
    const newForm = getUseForm(false); // true 表示获取实例后不清除表单内容
    console.log('formValues: ', formValues);
  }}
  onCancel={(getUseForm) => {
    const newForm = getUseForm(false); // true 表示获取实例后不清除表单内容
    console.log('返回');
  }}
>
  <SFields type="input" name="one" required />
  <SFields type="input" name="two" />
</SForm>

example 2: 单表单
 const ExtraBtn = () => {
  return (
    <Button
      type="primary"
      style={{
        width: 25%,
      }}
      onClick={() => {
        console.info('测试扩展按钮');
      }}
    >
      扩展按钮
    </Button>
  )
 }
<SForm
  onSubmit={(formValues, getUseForm) => {
    const newForm = getUseForm(false); // true 表示获取实例后不清除表单内容
    console.log('formValues: ', formValues);
  }}
  onCancel={(getUseForm) => {
    const newForm = getUseForm(false); // true 表示获取实例后不清除表单内容
    console.log('返回');
  }}
 eventBtnConfig={{
  submit: {}, // 来自 antd.ButtonProps
  submitBtnText: '提交2',
  hideSubmitBtn: false,
  cancel: {}, // 来自 antd.ButtonProps
  cancelBtnText: '返回2',
  hideCancelBtn: false,
  textAlign: 'left',
  extraBtn: <ExtraBtn /> // 接受 ReactNode|HtmlElement 类型
 }}
>
  <SFields type="input" name="one" required onChange={() => {}}/>
  <SFields type="input" name="two" onChange={() => {}}/>
</SForm>

example 3: 多表单
const [useForm1] = Form.useForm();
const [useForm2] = Form.useForm();
<SForm form={useForm1} name="form1">
  <SFields type="input" name="input" required />
</SForm>

<SForm form={useForm2} name="form2">
  <SFields type="input" name="test" required />
</SForm>
 * */
const Index: FC<Partial<SFormProps> & Omit<FormProps, filterProps>> = (props): ReactElement => {
  const [useForm] = Form.useForm();
  const {
    name = 'basic', layout = 'inline', autoComplete = false, form, hideEventBtn = false,
    footerBtnType, onSubmit, openSubmitCallBackClear = true, onCancel, openCancelCallBackClear = false,
    eventBtnConfig, children, ...formProps
  } = props;
  const buttonProps = {
    layout, footerBtnType, form, useForm, onSubmit, onCancel, eventBtnConfig,
    openSubmitCallBackClear, openCancelCallBackClear
  }
  // try {
  //   if (!form.resetFields) {
  //     throw new Error(`unexpected. '请检查传入的 form 字段是否被实例化, 你可以尝试从 Form.useForm() 获取'`);
  //   }
  // } catch (err) {
  //   console.warn(err);
  // }

  return (
    <Form.Provider
      onFormFinish={(name, { values, forms}) => {
        forms[name].setFieldsValue({ ...values });
      }}
    >
      <Form
        name={name}
        layout={layout}
        form={form ?? useForm}
        autoComplete={autoComplete ? 'on' : 'off'}
        className="base-component-super-form"
        {...formProps}
      >
        { children }
        {
          hideEventBtn || FooterEventBtn(buttonProps)
        }
      </Form>
    </Form.Provider>
  );
};

export default Index;
